<template>
<!--  <div>-->
<!--    <Top></Top>-->
    <div id="Content">
      <div id="Catalog">
        <form method="post" @submit.prevent="newAccount">
          <h3>User Information</h3>
          <span v-if="messageAccount !== null">
            <p style="color: red">{{ messageAccount }}</p>
          </span>
          <table>
            <tr>
              <td>User ID:</td>
              <td>
                <input type="text"
                  id="username"
                  name="username"
                  v-model="username"/>
<!--                  @blur="checkUsernameEmpty(this.username,'right_username','wrong_username','username_msg','username')"-->

                <img
                  id="right_username"
                  style="display: none"
                  src="../../assets/img/account/right.jpg"
                  width="15"
                  height="15"
                />
                <img
                  id="wrong_username"
                  style="display: none"
                  src="../../assets/img/account/wrong.jpg"
                  width="15"
                  height="15"
                />
                <div id="username_msg" style="display:none;">用户名不能为空</div>
              </td>
            </tr>
            <tr>
              <td>New password:</td>
              <td>
                <input
                  type="text"
                  id="password"
                  name="password"
                  v-model="password"
                  @input="checkPwd"
                  @blur="checkEmpty(this.password,'right_password','wrong_password','pwd_msg','password')"
                />
                <img
                  id="right_password"
                  style="display: none"
                  src="../../assets/img/account/right.jpg"
                  width="15"
                  height="15"
                />
                <img
                  id="wrong_password"
                  style="display: none"
                  src="../../assets/img/account/wrong.jpg"
                  width="15"
                  height="15"
                />
                <div class="gradebox" id="passbox">
                  <div class="grade all" id="one">&#x5F31;</div>
                  <div class="grade all" id="two">&#x4E2D;</div>
                  <div class="grade all" id="three">&#x5F3A;</div>
                  <div class="grade" id="four">&#x5F88;&#x5F3A;</div>
                </div>
                <div id="pwd_msg" style="display:none;">密码不能为空</div>
                <!-- <div id="passwordAvailability"></div> -->
              </td>
            </tr>
            <tr>
              <td>Repeat password:</td>
              <td>
                <input
                  type="text"
                  id="repeatedPassword"
                  name="repeatedPassword"
                  v-model="rePassword"
                  @blur="checkRePwd"

                />
                <img
                  id="right_repeatedPassword"
                  style="display: none"
                  src="../../assets/img/account/right.jpg"
                  width="15"
                  height="15"
                />
                <img
                  id="wrong_repeatedPassword"
                  style="display: none"
                  src="../../assets/img/account/wrong.jpg"
                  width="15"
                  height="15"
                />
                <!-- <div id="repeatedPasswordAvailability"></div> -->
                <div id="repwd_msg">{{ repwd_msg }}</div>
              </td>
            </tr>
          </table>

          <input
            type="submit"
            name="account"
            value="Save Account Information"
          />
        </form>
      </div>
    </div>
<!--  </div>-->
</template>
<script>
import axios from 'axios';
import Top from '../common/top.vue'
export default {
  name: "newAccount",
  data() {
    return {
      username: "",
      password: "",
      rePassword: "",
      messageAccount: "",


      repwd_msg:''
    };
  },
  components:{
    Top
  },
  methods: {
    //注册账号
    newAccount() {

      axios({
        method: "post",
        url: "http://localhost:8080/jpetstore/user",
        data: {
          username: this.username,
          password: this.password,
          rePassword: this.rePassword,

        },
      })
        .then((r) => {
          if (r.data.data === "注册成功") {
           // console(this.password);
            this.messageAccount = null;
            //跳转到未登陆得主界面开始登陆
            this.$router.push({
              path: "/",
            });
          } else {
           // console(this.password);
            this.messageAccount = r.data.data; //这里错误信息接口文档没写
          }
        })
        .catch((r) => {
          console.log(r);
        });
    },
    //各种信息得判空
    checkEmpty(username,el_right_username,el_wrong_username,el_username_msg,el_username){
        if(username===null||username===''){
            document.getElementById(el_right_username).style.display='none'
            document.getElementById(el_wrong_username).style.display='inline'
            document.getElementById(el_username).style.borderColor='red'
            document.getElementById(el_username_msg).style.color='red'
            document.getElementById(el_username_msg).style.display='block'
        }else{

            document.getElementById(el_right_username).style.display='inline'
            document.getElementById(el_wrong_username).style.display='none'
            document.getElementById(el_username).style.borderColor='green'
            document.getElementById(el_username_msg).style.display='none'
        }

    },
    //动态判断用户名是否存在-接口文档妹写
    // checkUsernameEmpty(username,el_right_username,el_wrong_username,el_username_msg,el_username){
    //     if(username===null||username===''){
    //         document.getElementById(el_right_username).style.display='none'
    //         document.getElementById(el_wrong_username).style.display='inline'
    //         document.getElementById(el_username).style.borderColor='red'
    //         document.getElementById(el_username_msg).style.color='red'
    //         document.getElementById(el_username_msg).style.display='block'
    //     }else{
    //       //判断用户名是否存在
    //       axios({
    //     method: "get",
    //     url: "http://localhost:8080/jpetstore/username",
    //     data: {
    //       username: this.username,
    //     },
    //   })
    //     .then((r) => {
    //       if (r.data.data === "用户名不存在") {
    //         //用户名不存在，可以注册
    //         document.getElementById(el_right_username).style.display='inline'
    //         document.getElementById(el_wrong_username).style.display='none'
    //         document.getElementById(el_username).style.borderColor='green'
    //         document.getElementById(el_username_msg).style.display='none'
    //         this.messageAccount = null;
    //       } else {
    //         //用户名已存在，不能注册
    //         document.getElementById(el_right_username).style.display='none'
    //         document.getElementById(el_wrong_username).style.display='inline'
    //         document.getElementById(el_username).style.borderColor='red'
    //         document.getElementById(el_username_msg).style.color='red'
    //         document.getElementById(el_username_msg).style.display='block'
    //         this.messageAccount = "用户名已存在";
    //       }
    //     })
    //     .catch((r) => {
    //       console.log(r);
    //     });
    //
    //     }
    //
    // },
    //判断密码强弱
    checkPwd(){
    //定义默认值
    var modes=0;
    //清除输入框输入空格
    document.getElementById('password').value=document.getElementById('password').value.replace(/\s+/g,'');
    //输入时盒子显示
    if(this.password!==''){
        document.getElementById('passbox').style.display='flex';
    }
    if(this.password===''){
        document.getElementById('passbox').style.display='none';
    }
    //密码长度判断
    //小于等于4个字符串
    if(this.password.length<=4){
        modes=modes+2;
    }
    //5-7个字符串
    if(this.password.length>=5){
        modes=modes+5;
    }
    //大于等于8个字符串
    if(this.password.length>=8){
        modes=modes+10;
    }
    //密码字母判断
    //字母为小写
    if(/[a-z]/.test(this.password)){
        modes=modes+5;
    }
    //字母为大写
    if(/[A-Z]/.test(this.password)){
        modes=modes+5;
    }
    //密码数字判断
    var zu=this.password.match(/[0-9]/g);
    if(zu!=null){
        //只有一个数字
        if(zu.length<2){
            modes=modes+5;
        }
        ///大于一个数字
        if(zu.length>1){
            modes=modes+10;
        }
    }
    //符号判断
    var bu=this.password.match(/\W/g);
    if(bu!=null){
        //只有一个符号
        if(bu.length<2){
            modes=modes+5;
        }
        //大于一个符号
        if(bu.length>1){
            modes=modes+10;
        }
    }

    if(modes<20){
        document.getElementById('one').style.background='#F45A68',
        document.getElementById('two').style.background='#ccc',
        document.getElementById('three').style.background='#ccc',
        document.getElementById('four').style.background='#ccc';
    }
    if(modes>=20&&modes<30){
        document.getElementById('one').style.background='#ccc',
        document.getElementById('two').style.background='#fc0',
        document.getElementById('three').style.background='#ccc',
        document.getElementById('four').style.background='#ccc';
    }
    if(modes>=30&&modes<40){
        document.getElementById('one').style.background='#ccc',
        document.getElementById('two').style.background='#ccc',
        document.getElementById('three').style.background='#cc0',
        document.getElementById('four').style.background='#ccc';
    }
    if(modes>=40){
        document.getElementById('one').style.background='#ccc',
        document.getElementById('two').style.background='#ccc',
        document.getElementById('three').style.background='#ccc',
        document.getElementById('four').style.background='#14B12F';
    }
    },
    //密码判空
    checkPwd2(){
        if(this.password===null||this.password===''){
            this.pwd_msg='密码不能为空'
            document.getElementById('right_password').style.display='none'
            document.getElementById('wrong_password').style.display='inline'
            document.getElementById('password').style.borderColor='red'
            document.getElementById('pwd_msg').style.color='red'
        }else{   
            this.pwd_msg=null
            document.getElementById('right_password').style.display='inline'
            document.getElementById('wrong_password').style.display='none'
            document.getElementById('password').style.borderColor='green'
        }
    },
    //两次密码是否一致
    checkRePwd(){
        if(this.password===null||this.rePassword===''){
            this.repwd_msg='密码不能为空'
            document.getElementById('right_repeatedPassword').style.display='none'
            document.getElementById('wrong_repeatedPassword').style.display='inline'
            document.getElementById('repeatedPassword').style.borderColor='red'
            document.getElementById('repwd_msg').style.color='red'
        }else{
            if(this.password===this.rePassword){
                this.repwd_msg=null
            document.getElementById('right_repeatedPassword').style.display='inline'
            document.getElementById('wrong_repeatedPassword').style.display='none'
            document.getElementById('repeatedPassword').style.borderColor='green'
            } else{
                this.repwd_msg='密码不一致'
            document.getElementById('right_repeatedPassword').style.display='none'
            document.getElementById('wrong_repeatedPassword').style.display='inline'
            document.getElementById('repeatedPassword').style.borderColor='red'
            document.getElementById('repwd_msg').style.color='red'
            }   
           
        }
        }

  },
};
</script>
